<template>
  <div>
    <template v-if="structData.url !== undefined && structData.url != ''">
      <!-- <component
                      :is="structData.url"
                      :formDate="formData"
                    /> -->
    </template>
    <template else>
      <template
        v-if="structData.attrs !== undefined && structData.attrs.length > 0"
      >
        <el-row
          :gutter="10"
          v-for="(attr, index) in structData.attrs"
          :key="index"
        >
          <template v-if="attr.dataStruct !== undefined">
            <el-col :span="24" class="line">
              <PPMData :structData="attr.dataStruct" :formData="formData" />
            </el-col>
          </template>
          <template v-if="attr.tabStruct !== undefined">
            <el-col :span="24" class="line">
              <PPMTab
                :structData="attr.tabStruct"
                :formData="formData"
              ></PPMTab>
            </el-col>
          </template>
          <template
            v-if="attr.components !== undefined && attr.components.length > 0"
          >
            <el-col
              v-for="(component, componentIndex) in attr.components"
              :span="component.col.span"
              class="line"
              :key="componentIndex"
            >
              <template
                v-if="
                  component.attrId !== undefined && component.attrId !== null
                "
              >
                <template v-for="(value, key) in formData">
                  <template
                    v-if="
                      key ===
                      component.pageTempStructId + '-' + component.attrId
                    "
                  >
                    <el-form-item
                      :key="key"
                      :label="component.attrName"
                      :prop="key + '.value'"
                      :rules="component.rules"
                    >
                      <!-- 1:input -->
                      <template v-if="component.attrTypeCd === '1'">
                        <el-input v-model="value.value"></el-input>
                      </template>
                      <!-- 2:select -->
                      <template v-if="component.attrTypeCd === '2'">
                        <el-select v-model="value.value" placeholder="请选择">
                          <el-option
                            v-for="(option, index) in value.options"
                            :key="index"
                            :label="option.label"
                            :value="option.value"
                          >
                          </el-option>
                        </el-select>
                      </template>
                      <!-- 3:textarea -->
                      <template v-if="component.attrTypeCd === '3'">
                        <el-input
                          v-model="value.value"
                          type="textarea"
                        ></el-input>
                      </template>
                      <!-- 4:password -->
                      <template v-if="component.attrTypeCd === '4'">
                        <el-input
                          v-model="value.value"
                          type="password"
                        ></el-input>
                      </template>
                      <!-- 5:radio -->
                      <template v-if="component.attrTypeCd === '5'">
                        <el-radio-group v-model="value.value">
                          <el-radio
                            v-for="(option, index) in value.options"
                            :label="option.value"
                            :key="index"
                            >{{ option.label }}</el-radio
                          >
                        </el-radio-group>
                      </template>
                      <!-- 6:checkbox -->
                      <template v-if="component.attrTypeCd === '6'">
                        <el-checkbox-group v-model="value.value">
                          <el-checkbox
                            v-for="(option, index) in value.options"
                            :label="option.value"
                            :key="index"
                            >{{ option.label }}</el-checkbox
                          >
                        </el-checkbox-group>
                      </template>
                      <!-- 8:hidden -->
                      <template v-if="component.attrTypeCd === '8'">
                        <!-- <el-input v-model="value.value" type="hidden"></el-input> -->
                      </template>
                    </el-form-item>
                  </template>
                </template>
              </template>
              <template v-else>
                <!-- 7:label -->
                <template v-if="component.attrTypeCd === '7'"> </template>
                <!-- 10:button -->
                <template v-if="component.attrTypeCd === '10'">
                  <!-- <input-dialog
												v-model="value.value"
												text="staffName"
												:config="{
													title: '业务经理选项',
													tableData: [], //表格数据源
													tableColumn: [
														//表格定义
														{ field: 'staffCode', title: '业务经理编码', width: '50%' },
														{ field: 'staffName', title: '业务经理名称', width: '50%' },
													],
													tableForm: {
														//查询条件
														items: [
															{
																field: 'staffCode',
																title: '业务经理编码',
																itemRender: {
																	name: 'input',
																	attrs: { placeholder: '' },
																},
															},
															{
																field: 'staffName',
																title: '业务经理名称',
																itemRender: {
																	name: 'input',
																	attrs: { placeholder: '' },
																},
															},
															{
																itemRender: {
																	name: '$button',
																	props: { content: '查询', type: 'submit', status: 'primary' },
																},
															},
														],
														data: {}, //这个data一定要加，否则无法获取查询参数
													},
												}"
											/> -->
                </template>
                <!-- 20:plugin -->
                <template v-if="component.attrTypeCd === '20'">
                  {{ component.attrName }}:
                  <!-- <component :is="component.actionValue" :formDate="formData"/> -->
                </template>
                <!-- 30:lable -->
                <template v-if="component.attrTypeCd === '30'">
                  {{ component.attrName }}:<label
                    :class="component.props['class']"
                    :style="component.props['style']"
                    >{{ component.defaultValue }}</label
                  >
                </template>
              </template>
            </el-col>
          </template>
        </el-row>
      </template>
    </template>
  </div>
</template>
<script>
import { validatePhone } from "@/utils/validate";
// import InputDialog from "@/components/public/forms/inputDialog";
export default {
  name: "ppmForm",
  props: {
    formData: {
      type: Object,
    },
    structData: {
      type: Object,
    },
    spanNum: {
      type: Number,
      default: 24,
    },
  },
  data() {
    return {};
  },
  components: {
    PPMTab: () => import("./ppmTab"),
    PPMData: () => import("./ppmData"),
    // InputDialog,
  },
  created() {
    this.load();
  },
  mounted() {},
  methods: {
    load() {
      //验证规则匹配
      if (this.structData.attrs != null && this.structData.attrs.length > 0) {
        this.structData.attrs.forEach((attr) => {
          if (attr.components != undefined && attr.components.length > 0) {
            attr.components.forEach((component) => {
              if (
                component.validRule != null &&
                component.validRule.length != 0
              ) {
                let validKeys = component.validRule.split(",");
                let rules = [];
                validKeys.forEach((validKey) => {
                  if (validKey == "empty") {
                    rules.push({
                      required: true,
                      message: "请输入" + component.attrName,
                      trigger: "change",
                    });
                  } else if (validKey == "chinese") {
                    //rules.push({validator: validateChinese, trigger: 'blur',});
                  } else if (validKey == "number") {
                    //rules.push({validator: validNum, trigger: 'blur'});
                  } else if (validKey == "double") {
                    //rules.push({validator: validDoubleNum, trigger: 'blur'});
                  } else if (validKey == "phone") {
                    rules.push({ validator: validatePhone, trigger: "blur" });
                  } else if (validKey == "pinteger") {
                    //rules.push({validator: validIntNum, trigger: 'blur'});
                  } else if (validKey == "zip") {
                    //rules.push({validator: chinese, trigger: 'blur'});
                  } else if (validKey == "hidden") {
                    component.ishow.xxx = false;
                    //i++;
                  }
                });
              }
              if (component.attrTypeCd === "2") {
                //component.actionValue 作为参数，调用接口，返回option选项赋值给component.options
              }
            });
          }
        });
      }
      
    },
  },
};
</script>

<style></style>
